<template>
    <div>
        <div style="margin-bottom: 30px;">
   <el-button link style="margin-right: 40px;color: #000;" @click="Show()"><h4 :style="{ color: activeIndex1 == 1 ? '#409EFF':'#000' }">BOM管理</h4></el-button>
   <el-button link style="margin-right: 40px;color: #000;" @click="handleSizeChange()"><h4 :style="{ color: activeIndex1==2 ? '#409EFF':'#000'}">BOM清单</h4></el-button>
   <el-button link style="margin-right: 40px;color: #000;" @click="getProduct()"><h4 :style="{ color: activeIndex1==3 ? '#409EFF':'#000'}">工艺流程</h4></el-button>
   
 </div>
        <!-- <el-table    v-show="a"  :data="tableData" border style="width: 100%">
            <el-table-column prop="bomNo" label="BOM编号" />
            <el-table-column prop="bomTheme" label="BOM主题" />
            <el-table-column prop="bomDefault" label="默认BOM" />
            <el-table-column prop="bomVersion" label="版本" />
            <el-table-column prop="bomType" label="成品类型" />
            <el-table-column prop="bomName" label="成品名称" />
            <el-table-column prop="dayNum" label="日产量" />
            <el-table-column prop="bomNote" label="备注" />
            <el-table-column prop="wIds" label="BOM配件" />
            <el-table-column prop="gIds" label="工艺流程" />
        </el-table> -->
<tr>
   <div  v-show="a"  >
    <div class="section">
      <span class="label">BOM主题：</span>
      <span class="value">{{ Bomform.itemNumber }}</span>
    </div>
    <div class="section">
      <span class="label">默认BOM：</span>
      <span class="value">{{ Bomform.bomTheme? '是' : '否' }}</span>
    </div>
    <div class="section">
      <span class="label">版本：</span>
      <span class="value">{{ Bomform.bomVersion }}</span>
    </div>
   
    
    <div class="section">
      <span class="label">日产量：</span>
      <span class="value">{{ Bomform.dayNum }}</span>
    </div>
    <div class="section">
      <span class="label">当前库存：</span>
      <span class="value">{{ Bomform.processFlowCode }}</span>
    </div>
    <div class="section">
      <span class="label">预估成本：</span>
      <span class="value">{{ Bomform.wIds }}</span>
    </div>
   </div>

 
</tr>



<div>
    <el-table    v-show="b"  :data="tableData1" border style="width: 100%">
            <el-table-column prop="productMaterial" label="物资" width="120" />
          <el-table-column prop="productMaterialName" label="物资名称" width="120" />
          <el-table-column prop="specificationModel" label="规格型号" width="120" />
          <el-table-column prop="unit" label="单位" width="80" />
          <el-table-column prop="transferQuantity" label="转移数量" width="100"/>
          <el-table-column prop="batchNumber" label="批次号" width="120" />
          <el-table-column prop="outWarehouse" label="移出仓库" width="120" />
          <!-- <td>
            <!-- 分页 -->

<!-- 
          <el-pagination
      v-model:current-page="page.Index"
      v-model:page-size="page.Size"
      :page-sizes="[10, 20, 30, 40]"
     
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalCount"
      @size-change=" handleSizeChange()"
      @current-change="handleSizeChange()"
    />
        </td> --> -->
        </el-table>
    
</div>
        

        <el-table v-show="c" :data="tableData2" highlight-current-row border >
     
       <el-table-column prop="processCode" label="工序编码" width="300" />
       <el-table-column prop="processName" label="工序名称" width="200" />
       <el-table-column prop="isEnabled" label="是否启用" width="200" />
       <el-table-column prop="remarks" label="备注" width="300" />
       
       </el-table>

    </div>
</template>

<script setup lang="ts">
import router from "@/router";
import { useRoute } from "vue-router";
const route=useRoute();
import axios from "axios";

import { onMounted, reactive, ref, watch } from "vue";
const tableData = ref([]);
const tableData1 = ref([]);
const tableData2 = ref([]);
const a=ref(false);
const b = ref(false)
const c = ref(false)
const d=ref(false)
const activeIndex1 = ref(-1);
const apiUrl = import.meta.env.VITE_APP_API_URL;
onMounted(()=>{
    
    getBOM();
})
const Show =  () => {
    activeIndex1.value = 1;
   d.value = false;
   a.value = true;
   b.value = false;
   c.value = false;
    axios({
        url:apiUrl+"/T5/BOMguan/GetBOMguan",
        method:'get',
      
    }).then((res)=>{
        tableData.value = res.data.data;
      
    })
   
};
const page = reactive({
    Index: 1,
    Size: 15,
    totalCount: 0,
    totalPage: 0,
  
  });
  const handleSizeChange=()=>{
    activeIndex1.value = 2;
 
   a.value = false;
   b.value = true;
   c.value = false;
   axios({
    url:apiUrl+"/T5/Setting/ShowTBS",
    method:'get',   
    params:page
   })
   .then((res)=>{
    tableData1.value = res.data.data;

    page.totalCount=res.data.totalCount;
    page.totalPage=res.data.totalPage;
   })


   
  }
  const formp = reactive({
 totalCount: 0,
 totalPage: 0,
size: 15,
 index: 1,
 productNo: ''
});
  const getProduct = () => {
   activeIndex1.value = 3;
   d.value = false;
   a.value = false;
   b.value = false;
   c.value = true;
   axios({
   url: apiUrl+"/T5/Setting/ProcessingoShow",
   method: 'get',
   params: formp
 }).then((res) => {
   tableData2.value = res.data.data;
   console.log(tableData.value);
   formp.totalCount = res.data.totalCount;
   formp.totalPage = res.data.totalPage;
 })
}

const getBOM = () => {

    axios.get(apiUrl+"/T5/BOMguan/GetBOMguan", {
        params:{
            bomId: route.query.bomId,
            index:1,
            size:5
        }
    }).then((res) => {
        let b = res.data.data[0];
        console.log( res.data.data);
        Bomform.bomId = b.bomId;
        Bomform.itemNumber = b.itemNumber;
        Bomform.bomTheme = b.bomTheme;
        Bomform.bomDefault = b.bomDefault;
        Bomform.bomVersion = b.bomVersion;
        Bomform.bomType = b.bomType;
        Bomform.bomName = b.bomName;
        Bomform.dayNum = b.dayNum;
     
        Bomform.wIds = b.wIds;
        Bomform.processFlowCode = b.processFlowCode;
        
        Bomform.isDeleted = b.isDeleted;
      
    })
}
const Bomform=reactive({
    bomId:0,
    itemNumber: "",
  bomTheme: "",
  bomDefault: "",
  bomVersion: "",
  bomType: "",
  bomName: "",
  dayNum: "",
  bomNot: "",
  wIds: "",
  processFlowCode: "",
  attachmen: "",
  isDeleted: false
})
</script>

<style scoped>

</style>